<template>
  <el-main class="image-main" :loading="loading">
    <div class="top p-3">
      <el-row :gutter="10">
        <el-col :span="6" :offset="0" v-for="(item, index) in list" :key="index">

          <el-card shadow="hover" class="relative mb-3" :body-style="{ 'padding': 0 }">
            <el-image 
              :src="item.url" 
              fit="cover" 
              class="h-[150px] w-full" 
              :preview-src-list="[item.url]"
              :initial-index="0"
            ></el-image>
            <div class="image-title">{{ item.name }}</div>
            <div class="flex items-center justify-center p-2">
              <el-button type="primary" size="small" @click="handleEdit(item)" text>重命名</el-button>
              
              <el-popconfirm
                width="220"
                confirm-button-text="是"
                cancel-button-text="否"
                icon-color="#626AEF"
                title="是否删除?"
                @confirm="handleDelete(item.id)"
              >
                <template #reference>
                  <el-button type="primary" size="small"  text>删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </el-card>
          
        </el-col>
      </el-row>
      
    </div>
    <div class="bottom bg-gray-50">
      <el-pagination
        background
        layout="prev, pager, next" 
        :total="total"
        :current-page="currentPage"
        :page-sizes="limit"
        @current-change="getData"
      />
    </div>
  </el-main>

  <el-drawer
    v-model="drawer"
    title="上传图片"
  >
    <UploadFile />
  </el-drawer>
</template>

<script lang='ts' setup>
import { getImageClassList, getImageList, updateImageName, deleteImageName  } from '@/services/image_class';
import { showPrompt, msgSuccess } from '@/composables/util'
import UploadFile from './UploadFile.vue';


// data 数值
const loading = ref<boolean>(false) //loading 加载
const list = ref<any>([]) //列表数据
const image_class_id = ref<number>(0)

// 分页
const currentPage = ref<number>(1)  //当前页数
const total = ref<number>(0)  //总条数
const limit = ref<number>(10) //一页多少条

// 上传图片
const drawer = ref<boolean>(false)
const handleOpenFile = () =>drawer.value = true


// 方法

// 获取列表
const getData = (p:any = null) =>{
  // p=null 意思是不传值，默认为空
  // console.log(p);
  if(typeof p == 'number'){
    currentPage.value = p
  }
  loading.value = true
  
  getImageList(image_class_id.value, currentPage.value)
  .then((res)=>{
    // console.log(res.data.data)
    total.value = res.data.data.totalCount
    list.value = res.data.data.list
    // console.log(list.value);
    
  })
  .finally(()=>{
    loading.value = false
  })
}

// 根据分类ID获取图片列表
const loadData = (id:number) =>{
  // console.log('id',id)
  currentPage.value = 1
  image_class_id.value = id
  getData()
}


// 重命名
const handleEdit = (val:any) =>{
  // console.log(val)
  showPrompt('重命名',val.name)
  .then((res)=>{ 
    loading.value = true
    // console.log(res.value)
    updateImageName(val.id, res.value).then(res1=>{
      // console.log(res1.data)
      msgSuccess('修改成功')
      getData()
    }).finally(()=>{
      loading.value = false
    })
  })
}

// 删除
const handleDelete = (val:number) =>{
  loading.value = true
  deleteImageName([val]).then(()=>{
    msgSuccess('删除成功')
    getData()
  }).finally(() =>{
    loading.value = false
  })
}


// 暴露函数
defineExpose({
  loadData,
  handleOpenFile
})

</script>

<style scoped lang="less">
.image-main{
  position: relative;
  .top{
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 50px;
    overflow-y: auto;
  }
  .bottom{
    position: absolute;
    height: 50px;
    left: 0px;
    right: 0px;
    bottom: 0;
    @apply flex items-center justify-center;
  }
}
.image-title{
  position: absolute;
  top: 122px;
  left: -1px;
  right: -1px;
  @apply text-sm truncate text-gray-100 bg-gray-800 bg-opacity-50 px-2 py-1;
}

</style>
